<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>QKD管理系统</title>
		<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
		<meta name="author" content="Vincent Garreau" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 , maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" media="screen" href="css/style_login.css">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
	</head>
	<body>
		<div id="particles-js">
			<div class="logo">
				<img src="img/logo.png" alt="找不到图片">
			</div>
			<div class="login">
				<div class="login-top">
					登录
				</div>
				<div class="main" id="cmm9801">
					<form id="login" action="login.action" method="post">
						<div class="login-center clearfix">
							<div class="login-center-img"><img src="img/name.png" /></div>
							<div class="login-center-input">
								<input type="text" name="username" v-model="username" placeholder="请输入您的用户名" onfocus="this.placeholder=''"
								 onblur="this.placeholder='请输入您的用户名'" />
								<div class="login-center-input-text">用户名</div>
							</div>
						</div>
						<div class="login-center clearfix">
							<div class="login-center-img"><img src="img/password.png" /></div>
							<div class="login-center-input">
								<input type="password" v-model="password" @keyup.enter="login" placeholder="请输入您的密码" onfocus="this.placeholder=''"
								 onblur="this.placeholder='请输入您的密码'" />
								<div class="login-center-input-text">密码</div>
							</div>
						</div>
						<!--<input type="hidden" name="optype" value="login" />-->`
						<input type="hidden" id="shapass" name="password" />
						<div class="login-button" @click="login">
							登陆
						</div>
					</form>
				</div>
			</div>
			<div class="sk-rotating-plane"></div>
		</div>

		<!-- scripts -->
		<script src="js/particles.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/jquery.sha1.js"></script>
		<script type="text/javascript">
			function hasClass(elem, cls) {
				cls = cls || '';
				if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
				return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
			}

			function addClass(ele, cls) {
				if (!hasClass(ele, cls)) {
					ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
				}
			}

			function removeClass(ele, cls) {
				if (hasClass(ele, cls)) {
					var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
					while (newClass.indexOf(' ' + cls + ' ') >= 0) {
						newClass = newClass.replace(' ' + cls + ' ', ' ');
					}
					ele.className = newClass.replace(/^\s+|\s+$/g, '');
				}
			}
			/* 			document.querySelector(".login-button").onclick = function() {
							addClass(document.querySelector(".login"), "active")
							setTimeout(function() {
								addClass(document.querySelector(".sk-rotating-plane"), "active")
								document.querySelector(".login").style.display = "none"
							}, 800)
							setTimeout(function() {
								removeClass(document.querySelector(".login"), "active")
								removeClass(document.querySelector(".sk-rotating-plane"), "active")
								document.querySelector(".login").style.display = "block"
								alert("登录成功")

							}, 5000)
						} */
		</script>

		<script type="text/javascript">
			var vm = new Vue({
				el: "#cmm9801",
				data: {
					username: '',
					password: ''
				},
				methods: {
					login: function(event) {
						var username = vm.username;
						var password = vm.password;
						if (username.length == 0 || password.length == 0) {
							alert("用户名、密码不能为空");
							return false;
						}
						$("#shapass").val($.sha1(vm.password));
						$("#login").submit();
					}
				},
				created: function() {
					//检查是否登陆
					var isLogin = sessionStorage.getItem("isLogin");
					if (isLogin == 'true') {
						window.location.href = "main.html";
						return;
					}
				}
			});
		</script>
	</body>
</html>
